<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta name="format-detection" content="telephone=no;email=no">

		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/iconfont.css">
		<title>临空港印象</title>
		<style>
			html,
			body {
				background-color: #fff;
			}
			
			.special-picture figure {
				margin: 0;
			}
			
			.special-picture img {
				display: block;
				width: 100%;
			}
			
			.special-guide {
				padding: 11px 15px;
				text-align: justify;
				background-color: #fff;
			}
			
			.special-guide p {
				padding: 5px;
				margin-bottom: 0;
				line-height: 1.8;
				font-size: 15px;
				background-color: #e6e6e6;
				color: #000;
			}
			
			.special-body .special-title {
				height: 33px;
				padding-left: 20px;
				margin: 0;
				line-height: 33px;
				font-size: 18px;
				font-weight: normal;
				background-color: #e6e6e6;
			}
			
			.list .mui-table-view-cell.mui-media .mui-media-object {
				width: 91px;
				height: 65px;
				max-width: 100px;
			}
			
			.list .mui-table-view-cell.mui-media .mui-media-body {
				position: relative;
				white-space: normal;
				font-size: 18px;
			}
			
			.list .mui-table-view-cell .mui-media-body .news-tag {
				position: absolute;
				right: 0;
				bottom: 0;
			}
			
			.list .mui-table-view-cell .mui-media-body .tag {
				display: inline-block;
				width: 30px;
				line-height: 16px;
				text-align: center;
				font-size: 12px;
				border-width: 1px;
				border-style: solid;
				border-radius: 3px;
			}
			
			.list .mui-table-view-cell .mui-media-body .news-time {
				margin-top: 10px;
			}
			
			.list .mui-table-view-cell .mui-media-body .time {
				color: #999;
				font-size: 14px;
			}
			
			.list .mui-table-view-cell.imgs-cell .mui-media-body {
				height: auto;
			}
			
			.list .mui-table-view-cell.imgs-cell .imgs-cell__pic {
				display: -webkit-flex;
				display: flex;
				margin-right: -5px;
				margin-top: 5px;
			}
			
			.list .mui-table-view-cell.imgs-cell .imgs-cell__info {
				overflow: hidden;
			}
			
			.list .mui-table-view-cell.imgs-cell .imgs-cell__pic .img {
				-webkit-flex: 1;
				flex: 1;
				margin-right: 8px;
				overflow: hidden;
			}
			
			.list .mui-table-view-cell.imgs-cell .imgs-cell__pic .img img {
				width: 100%;
			}
			
			.list .mui-table-view-cell .mui-media-body .imgs-tag {
				color: #ec00fb;
				border-color: #ec00fb;
			}
			
			.more-share {
				width: 46px;
				height: 46px;
			}
			
			.more-share .iconfont {
				font-size: 26px;
			}
		</style>
	</head>

	<body>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div id="specialHead">

				</div>
				<div>
					<div class="special-body">
						<!--<h2 class="special-title">临空港印象</h2>-->
						<!-- 图文列表数据 -->
						<ul class="mui-table-view list" id="specialBody"></ul>
					</div>
				</div>
			</div>
		</div>
		<!-- 更多操作 -->
		<div id="settings" class="settings mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view mui-grid-view mui-grid-9 more-setting">
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon iconfont">&#xe617;</span>
						<div class="mui-media-body">收藏</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon iconfont">&#xe60d;</span>
						<div class="mui-media-body">正文字号</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon more-share"><span class="iconfont">&#xe608;</span></span>
						<div class="mui-media-body">更多分享</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon iconfont">&#xe60e;</span>
						<div class="mui-media-body">微信好友</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon iconfont">&#xe610;</span>
						<div class="mui-media-body">QQ好友</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon iconfont">&#xe611;</span>
						<div class="mui-media-body">新浪微博</div>
					</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#settings"><b>取消</b></a>
				</li>
			</ul>
		</div>
		<!-- 缓存数据 -->
		<textarea id="listTemp" style="display: none;"></textarea>
		
		<script src="../../js/mui.min.js"></script>
		<script src="../../libs/zepto.min.js"></script>
		<script src="../../js/template.js"></script>
		<script src="../../js/common.js"></script>
		<!-- 专题导读 -->
		<script id="specialGuide" type="text/html">
			<div class="special-picture">
				<figure>
					<!--<img src="{{subject.carouselImage}}">-->
					<img src="../../images/lauch/def/yximg.png">
				</figure>
			</div>
			<!--<div class="special-guide">
				<p>{{subject.descs}}</p>
			</div>-->
		</script>
		<!-- 图文模板 -->
		<script id="specialList" type="text/html">
			{{each list as value i}} {{if value.type == 1}}
			<li class="mui-table-view-cell mui-media imgs-cell">
				<a href="{{value.outerLinkUrl}}" data-id="{{value.id}}" data-type="{{value.type}}" data-isOuterLink="{{value.isOuterLink}}">
					<div class="mui-media-body">
						{{value.title}}
						<div class="imgs-cell__pic">
							{{each value.imgs as item i}}
							<span class="img"><img src="{{item}}" onerror="this.src='../../images/lauch/def/tw_def.png'" ></span> {{/each}}
						</div>
						<div class="imgs-cell__info">
							<div class="mui-pull-left"><time class="time">{{value.releaseAtMinNumber}}</time></div>
							<div class="mui-pull-right"><span class="tag imgs-tag">图集</span></div>
						</div>
					</div>
				</a>
			</li>
			{{else}}
			<li class="mui-table-view-cell mui-media">
				<a href="{{value.outerLinkUrl}}" data-id="{{value.id}}" data-type="{{value.type}}" data-isOuterLink="{{value.isOuterLink}}">
					<img class="mui-media-object mui-pull-left" src="{{value.carouselImage}}" onerror="this.src='../../images/lauch/def/tw_def.png'" >
					<div class="mui-media-body image-text">
						{{value.title}}
						<div class="news-time"><time class="time">{{value.releaseAtMinNumber}}</time></div>
					</div>
				</a>
			</li>
			{{/if}} {{/each}}

		</script>
		<script>
			var pageSize = 999999; //每页加载的数量
			var pageStart = 0;
			var subjectId = 8,
				columnsId = 25;
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					}
				}
			});
			
			//添加night自定义事件监听
			/*window.addEventListener('night', function(event) {
				lkg.nightMode();
			});*/
			//添加read自定义事件监听
			window.addEventListener('read', function(event) {
				var currentType = plus.networkinfo.getCurrentType();
				var readMode = localStorage.getItem("readMode");
				if (readMode == 1) {
					if (currentType === plus.networkinfo.CONNECTION_WIFI) {
						showImg("#specialBody");
					} else {
						hideImg("#specialBody");
					}
				} else if (readMode == 2) {
					showImg("#specialBody");
				} else if (readMode == 3) {
					hideImg("#specialBody");
				}
			});

			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				var currentTime = "1900-01-01";
				document.getElementById('specialHead').innerHTML = "";
				document.getElementById('specialBody').innerHTML = "";
				mui.ajax({
					url: baseUrl + '/news/downZTList?subjectId=' + subjectId + '&columnsId=' + columnsId + '&releaseAt=' + currentTime,
					dataType: 'json',
					type: 'get',
					success: function(data) {
						if (data.returnFlag == 0) {
							mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //下拉刷新结束
							mui.each(data.list, function(index, value) {
								if (value.releaseAtMinNumber < 28800000) {
									value.releaseAtMinNumber = Humanize(value.releaseAtMinNumber);
								} else {
									value.releaseAtMinNumber = value.releaseAt;
								}
							});
							var guideHtml = template('specialGuide', data);
							var listHtml = template('specialList', data);
							$("#specialHead").html(guideHtml);
							var specialBody = $("#specialBody");
							$("#listTemp").html(listHtml);
							var readMode = localStorage.getItem("readMode");
							var currentType = plus.networkinfo.getCurrentType();
							if (readMode == 1) {
							    if (currentType === plus.networkinfo.CONNECTION_WIFI) {
							        showImg("#listTemp");
							    } 
							    else {
							        hideImg("#listTemp");
							    }
							} 
							else if (readMode == 2) {
							    showImg("#listTemp");
							} 
							else if (readMode == 3) {
							    hideImg("#listTemp");
							}
							specialBody.html($("#listTemp").html());
							//图片自适应高度
							var img = $("#specialBody .imgs-cell").find("img");
							mui.each(img, function() {
								this.onload = function() {
									this.style.height = AutoHeight(this);
								};
							});
							//标签随文字段落高度自适应位置
							mui.each($("#list .image-text"), function() {
								if ($(this).height() < 65) {
									$(this).css("height", "65px");
									$(this).find(".news-time").addClass("pos");
								}
							});
						}
					},
					error: function(xhr, type, errorThrown) {
						//异常处理
						throwGetNewsError();
					}
				});
			}
			//添加列表项的点击事件
			mui('.mui-table-view').on('tap', 'a', function(e) {
				
				if (plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE){
					mui.toast("网络不给力");
					return;
				}
				
				var $this = $(this);
				var id = $this.attr('data-id');
				var type = $this.attr("data-type");
				var isOuterLink = $this.attr("data-isOuterLink");
				var outerLinkUrl = $this.attr("href");
				var href = null;
				//外链
				if (isOuterLink == 1) {
					//打开外部链接
					plus.runtime.openURL(outerLinkUrl);
				} else {
					if (type == 1) {
						href = '../news/images-details.html';
					} else {
						href = '../news/news-details.html';
					}
					//打开详情页面          
					mui.openWindow({
						url: href,
						id: href,
						extras: {
							newsId: id
						},
						waiting: {
							autoShow: false
						},
						createNew: true //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
					});
				}
			});
			
			if (mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pulldownLoading();
					}, 100);
				});
			} else {
				mui.ready(function() {
					mui('#pullrefresh').pullRefresh().pulldownLoading();
				});
			}
		</script>
	</body>

</html>